@import "mixin";

.bankcard {
  padding-top: rem(20px);
  width: 100%;
  height: rem(140px);
  background-color: #282c33;
  text-align: center;
  @include border-bottom-1px(#e5e5e5);
  >.bankcard-wrapper {
    display: inline-block;
    width: rem(310px);
    height: rem(120px);
    background: linear-gradient(65deg, #df243b, #de4659);
    border-radius: rem(5px) rem(5px) 0 0;
    >.bankcard-top {
      padding-left: rem(25px);
      width: 100%;
      height: rem(75px);
      line-height: rem(75px);
      font-size: 0;
      text-align: left;
      >.bank-icon {
        display: inline-block;
        vertical-align: middle;
        width: rem(36px);
        height: rem(36px);
        &.bank-default {
          @include bg-image('../images/bank-default');
        }
        &.ICBC {
          @include bg-image('../images/ICBC');
        }
        &.BC {
          @include bg-image('../images/BC');
        }
        &.CMBC {
          @include bg-image('../images/CMBC');
        }
        &.CCB {
          @include bg-image('../images/CCB');
        }
        &.ABC {
          @include bg-image('../images/ABC');
        }
        &.CIB {
          @include bg-image('../images/CIB');
        }
        &.JT {
          @include bg-image('../images/JT');
        }
        &.CEB {
          @include bg-image('../images/CEB');
        }
        &.CMB {
          @include bg-image('../images/CMB');
        }
        &.HB {
          @include bg-image('../images/HB');
        }
        &.GDB {
          @include bg-image('../images/GDB');
        }
        &.ZX {
          @include bg-image('../images/ZX');
        }
      }
      >.bank-text {
        margin-left: rem(8px);
        display: inline-block;
        vertical-align: middle;
        font-size: rem(16px);
        color: #ffffff;
      }
    }
    >.bankcard-bottom {
      padding: 0 rem(25px);
      display: flex;
      >span {
        display: inline-block;
        vertical-align: middle;
        flex: 1;
        line-height: rem(28px);
        font-size: rem(20px);
        color: #ffffff;
        &:last-child {
          line-height: rem(20px);
          font-size: rem(28px);
        }
      }
    }
  }
}

.content {
  >.total-cash-wrapper {
    padding: 0 rem(16px);
    width: 100%;
    height: rem(44px);
    line-height: rem(44px);
    background-color: #fff;
    >.left {
      display: inline-block;
      float: left;
      font-size: rem(16px);
      color: #333333;
    }
    >.right {
      display: inline-block;
      float: right;
      font-weight: bold;
      font-size: rem(16px);
      color: #333333;
    }
  }
  >.get-cash-wrapper {
    margin-top: rem(11px);
    margin-bottom: rem(25px);
    >p {
      padding-left: rem(16px);
      line-height: rem(24px);
      font-size: rem(12px);
      color: #999999;
      &.text {
        color: #333;
      }
    }
    >.input {
      width: 100%;
      height: rem(44px);
      background-color: #fff;
      font-size: 0;
      @include border-bottom-1px(#e5e5e5);
      @include border-top-1px(#e5e5e5);
      >input {
        padding-left: rem(16px);
        width: 100%;
        height: 100%;
        font-size: rem(16px);
      }
    }
  }
  >.btn-wrapper {
    text-align: center;
    font-size: 0;
    >a {
      display: inline-block;
      width: rem(345px);
      height: rem(49px);
      line-height: rem(49px);
      border-radius: rem(4px);
      background-color: #dc3838;
      font-size: rem(18px);
      color: #ffffff;
    }
  }
  >.defined-text-wrapper {
    margin-top: rem(200px);
    text-align: center;
    >a {
      padding: rem(10px);
      font-size: rem(12px);
      color: #999999;
    }
  }
}

.banner {
  padding: rem(70px) 0 0 0;
  width: 100%;
  height: rem(310px);
  background-color: #fff;
  >.get-cash-result {
    text-align: center;
    >.icon-register-correct {
      display: inline-block;
      width: rem(100px);
      height: rem(100px);
      @include bg-image('../images/icon-register-correct')
    }
    >.icon-register-error {
      display: inline-block;
      width: rem(100px);
      height: rem(100px);
      @include bg-image('../images/icon-register-error')
    }
    >p {
      height: rem(50px);
      line-height: rem(50px);
      font-size: rem(16px);
      color: #333333;
    }
  }
  >.get-cash-result-message {
    text-align: center;
    >p {
      line-height: rem(25px);
      font-size: rem(13px);
      color: #666666;
    }
  }
}


.get-cash-btn-wrapper {
  padding-top: rem(30px);
  text-align: center;
  font-size: 0;
  >a {
    display: inline-block;
    width: rem(345px);
    height: rem(49px);
    line-height: rem(49px);
    border-radius: rem(4px);
    background-color: #dc3838;
    font-size: rem(18px);
    color: #ffffff;
  }
}

.get-cash-doc-wrapper {
  padding: rem(30px) rem(20px) 0;
  width: 100%;
  >.title {
    line-height: rem(25px);
    font-weight: bold;
    font-size: rem(18px);
  }
  >.text-wrapper {
    >p {
      margin: rem(20px) 0;
      line-height: rem(25px);
      font-size: rem(13px);
      color: #333;
    }
  }
}

//弹层样式
.get-cash-layer {
  position: relative;
  width: rem(280px);
  height: rem(200px);
  border-radius: rem(8px)!important;
  box-sizing: border-box!important;
  >.content-wrapper {
    padding: rem(24px) rem(10px) 0;
    >.header {
      height: rem(48px);
      font-size: rem(18px);
      color: #333333;
    }
    >.text {
      font-size: rem(15px);
      color: #999999;
    }
  }
  >.btn-wrapper {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: rem(50px);
    border-top: rem(1px) solid #e5e5e5;
    >a {
      flex: 1;
      width: 100%;
      height: rem(50px);
      line-height: rem(50px);
      text-align: center;
      &:first-child {
        border-right: rem(1px) solid #e5e5e5;
      }
      &:last-child {
        color: #dc3838;
      }
    }
  }
}
.layui-m-layer1 .layui-m-layerchild {
  border-radius: rem(4px)!important;
}